<template>
  <el-row class="home-wrap">
    <el-col :span="24">
      <div class="home-header">
        <p class="home-title">实时数据</p>
        <p class="home-time mg-l-10">更新时间：2024-11-09 </p>
      </div>
      <div class="text-list mg-t-10">
        <div class="text-list-item" v-for="item in textList" :key="item.name">
          <div class="line" :style="{ background: item.bgColor }"></div>
          <p class="tli-name">{{ item.name }}</p>
          <div class="tli-data">
            <div>
              <span class="tli-num">{{ filterDecimals(item.num, false) }}</span>
              <span class="tli-decimals" v-if="filterDecimals(item.num, true)">.{{ filterDecimals(item.num, true) }}</span>
            </div>
            <span class="tli-scale" :style="{ color: item.type === 1 ? '#03A98E' : '#FF5566' }">
              {{ item.scale }}
              <svg-icon :icon-class="item.type === 1 ? 'down' : 'up'"></svg-icon>
            </span>
          </div>
        </div>
      </div>
      <el-row>
        <el-col :span="17">
          <div class="controls-wrap mg-t-20">
            <div class="controls-wrap-bg">
              <p class="home-title">快捷操作</p>
            </div>
            <div class="controls-wrap-content">
              <div class="cwc-item" v-for="item in controlsList" :key="item.name" @click="goPage(item)">
                <!-- <img :src="item.image" alt=""> -->
                <div class="cwc-item-image"></div>
                <p>{{ item.name }}</p>
              </div>
            </div>
          </div>
          <div class="controls-wrap mg-t-20">
            <div class="controls-wrap-bg">
              <p class="home-title">订单及销量趋势</p>
              <div class="flex">
                <MyBtnList :btnList="btnList"></MyBtnList>
                <el-date-picker
                  v-model="pickerTime"
                  type="daterange"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期">
                </el-date-picker>
              </div>
            </div>
            <div class="chart-line" id="chart-line"></div>
          </div>
          <div class="mg-t-20">
            <div class="shop-wrap pg-b-25">
              <MyTitle title="反馈意见处理" class="mg-b-20 mg-t-10"></MyTitle>
              <MainTable
                ref="ideaTable"
                :loading="listLoading"
                :columns="ideaColumns"
                :tableData="tableData"
                stripe
                height="568"
              >
                <template v-slot:source="{ row }">
                  <p :style="{ color: filterSource(row.source, true) }">{{ filterSource(row.source, 0) }}</p>
                </template>
                <el-table-column label="操作" width="160" align="center">
                  <template slot-scope="scope">
                    <el-button class="transact-btn" type="primary">办理</el-button>
                  </template>
                </el-table-column>
              </MainTable>
            </div>
          </div>
        </el-col>
        <el-col :span="7">
          <div class="mg-t-20 pl-20">
            <div class="event-wrap">
              <MyTitle title="待办事务"></MyTitle>
              <div class="event-list">
                <div class="event-list-item" v-for="item in eventList" :key="item.name" @click="goPage(item)">
                  <p>
                    <svg-icon :icon-class="item.iconName"></svg-icon>
                    <span class="eli-name">{{ item.name }}</span>
                  </p>
                  <p class="eli-num">{{ item.num }}</p>
                </div>
              </div>
            </div>
          </div>
          <div class="mg-t-20 pl-20">
            <div class="shop-wrap">
              <MyTitle title="商品销量占比">
                <MyBtnList :btnList="btnList" isActive></MyBtnList>
              </MyTitle>
              <div class="shop-chart" id="shop-chart"></div>
            </div>
          </div>
          <div class="mg-t-20 pl-20">
            <div class="shop-wrap">
              <MyTitle title="食安抽检项目占比">
                <MyBtnList :btnList="btnList" isActive></MyBtnList>
              </MyTitle>
              <div class="shop-chart" id="project-chart"></div>
            </div>
          </div>
          <div class="mg-t-3 pl-20">
            <div class="shop-wrap pg-b-25">
              <MyTitle title="检测合格率" class="mg-b-20 mg-t-10">
                <p class="more"><span>更多</span><svg-icon icon-class="next"></svg-icon></p>
              </MyTitle>
              <MainTable
                ref="detectionTable"
                :loading="listLoading"
                :columns="detectionColumns"
                :tableData="detectionTableData"
                height="534"
              >
                <template v-slot:title="{ tableIndex }">
                  <p class="detection-index">{{ tableIndex + 1 }}</p>
                </template>
              </MainTable>
            </div>
          </div>
        </el-col>
      </el-row>
    </el-col>
  </el-row>
</template>
<script>
  import echarts from "echarts";
  import MyBtnList from '@/components/MyBtnList/BtnList.vue'
  import MyTitle from './components/MyTitle.vue'
  import { EleResize } from "@/utils/esresize.js";
  import { homeData, lineOption, barOption } from './MockData'
  const { textList, controlsList, btnList, lineData, eventList, shopBarData, projectBarData, ideaColumns, tableData, detectionColumns, detectionTableData } = homeData
  export default {
    name: 'HomeIndex',
    components: { MyBtnList, MyTitle },
    data() {
      return {
        textList,
        controlsList,
        btnList,
        pickerTime: [],
        lineData,
        eventList,
        shopBarData,
        projectBarData,
        myChart: null,
        tableData,
        ideaColumns,
        detectionColumns,
        detectionTableData,
        listLoading: false
      }
    },
    mounted() {
      this.drawLine(lineOption(this.lineData), 'chart-line')
      this.drawLine(barOption(this.shopBarData, { title: '销量总额', subtext: '715,400' }), 'shop-chart')
      this.drawLine(barOption(this.projectBarData, { title: '抽检合格率', subtext: '99%' }), 'project-chart')
    },
    methods: {
      goPage(item) {
        if(item.path) {
          this.$router.push(item.path)
        }
      },
      filterDecimals(num, type) {   //  过滤小数
        let result = ''
        if(num.toString().includes('.')) {
          let numStr = num.toFixed(2).split('.')
          result = type ? numStr[1] : numStr[0]
        }else {
          result = type ? '' : num
        }
        return result
      },
      drawLine(option, dom) {
        this.myChart = echarts.init(document.getElementById(dom));
        const myChart = this.myChart
        let resizeDiv = document.getElementById(dom);
        // 清空画布
        this.myChart.clear();

        // 绘制图表
        this.myChart.setOption(option);

        let listener = function () {
          myChart.resize();
        };
        EleResize.on(resizeDiv, listener);
      },
      filterSource(source, isClass) {
        const sourceList = {
          1: '学校',
          2: '家长',
          3: '供应商'
        }
        const sourceClassList = {
          1: '#118AB4',
          2: '#E27C21',
          3: '#FF5566'
        }
        return isClass ? sourceClassList[source] : sourceList[source]
      }
    }
  }
</script>
<style lang="scss" scoped>
  $title_color: #222;
  $time_color: #999;
  $name_color: #666;
  .home-wrap {
    padding: 20px 20px 0px;
    background-color: #F5F8FD;
    .home-header {
      @include flex(flex-start, center);
      line-height: 20px;
    }
    .mg-b-20 {
      margin-bottom: 20px;
    }
    .text-list {
      display: grid;
      grid-template-columns: repeat(7, 1fr);
      gap: 20px;
      .text-list-item {
        height: 100px;
        background: #FFF;
        @include flex(center, flex-start);
        flex-direction: column;
        padding-left: 24px;
        position: relative;
        .tli-name {
          color: $name_color;
          font-size: $font_16;
        }
        .line {
          position: absolute;
          width: 4px;
          height: 100%;
          left: 0;
        }
        .tli-num {
          font-size: 32px;
          color: $title_color;
          font-weight: bold;
        }
        .tli-decimals {
          font-size: $font_16;
          color: $title_color;
          font-weight: bold;
        }
        .tli-scale {
          font-size: $font_14;
        }
        .tli-data {
          width: 80%;
          @include flex(space-between, baseline);
        }
      }
    }
    .controls-wrap {
      .controls-wrap-bg {
        height: 56px;
        line-height: 56px;
        background: #F4F4F4;
        padding: 0 20px;
        border-top-left-radius: 4px;
        border-top-right-radius: 4px;
        @include flex(space-between, center);
        .flex {
          @include flex(flex-end, center);
          .el-date-editor {
            width: 260px;
            margin-left: 20px;
            /deep/.el-range-input {
              width: 38%;
            }
          }
        }
      }
      .controls-wrap-content {
        height: 180px;
        background-color: #FFF;
        @include flex(space-around, center);
        .cwc-item {
          text-align: center;
          padding: 10px 20px;
          box-sizing: border-box;
          border: 1px solid transparent;
          &:nth-child(1) {
            .cwc-item-image {
              background: url('~@/assets/new_image/controls1.png') no-repeat;
              background-size: 100% 100%;
            }
            &:hover {
              .cwc-item-image {
                background: url('~@/assets/new_image/controls1_ac.png') no-repeat;
                background-size: 100% 100%;
              }
            }
          }
          &:nth-child(2) {
            .cwc-item-image {
              background: url('~@/assets/new_image/controls2.png') no-repeat;
              background-size: 100% 100%;
            }
            &:hover {
              .cwc-item-image {
                background: url('~@/assets/new_image/controls2_ac.png') no-repeat;
                background-size: 100% 100%;
              }
            }
          }
          &:nth-child(3) {
            .cwc-item-image {
              background: url('~@/assets/new_image/controls3.png') no-repeat;
              background-size: 100% 100%;
            }
            &:hover {
              .cwc-item-image {
                background: url('~@/assets/new_image/controls3_ac.png') no-repeat;
                background-size: 100% 100%;
              }
            }
          }
          &:nth-child(4) {
            .cwc-item-image {
              background: url('~@/assets/new_image/controls4.png') no-repeat;
              background-size: 100% 100%;
            }
            &:hover {
              .cwc-item-image {
                background: url('~@/assets/new_image/controls4_ac.png') no-repeat;
                background-size: 100% 100%;
              }
            }
          }
          &:nth-child(5) {
            .cwc-item-image {
              background: url('~@/assets/new_image/controls5.png') no-repeat;
              background-size: 100% 100%;
            }
            &:hover {
              .cwc-item-image {
                background: url('~@/assets/new_image/controls5_ac.png') no-repeat;
                background-size: 100% 100%;
              }
            }
          }
          &:nth-child(6) {
            .cwc-item-image {
              background: url('~@/assets/new_image/controls6.png') no-repeat;
              background-size: 100% 100%;
            }
            &:hover {
              .cwc-item-image {
                background: url('~@/assets/new_image/controls6_ac.png') no-repeat;
                background-size: 100% 100%;
              }
            }
          }
          &:nth-child(7) {
            .cwc-item-image {
              background: url('~@/assets/new_image/controls7.png') no-repeat;
              background-size: 100% 100%;
            }
            &:hover {
              .cwc-item-image {
                background: url('~@/assets/new_image/controls7_ac.png') no-repeat;
                background-size: 100% 100%;
              }
            }
          }
          p {
            margin-top: 17px;
          }
          &:hover {
            cursor: pointer;
            background: #FAFAFA;
            border-radius: 4px;
            border-color:#EEE;
            color: $theme_font_color;
          }
          .cwc-item-image {
            width: 50px;
            height: 50px;
            margin: 0 auto;
          }
        }
      }
    }
    .event-wrap {
      padding: 18px;
      background-color: #fff;
      .event-list {
        @include flex(center, center);
        flex-wrap: wrap;
        .event-list-item {
          width: 50%;
          padding: 20px 0;
          text-align: center;
          cursor: pointer;
          position: relative;
          &:hover {
            .eli-name, .eli-num {
              color: $theme_font_color;
            }
          }
          &:nth-child(odd) {
            &::after {
              content: '';
              position: absolute;
              right: 0;
              top: 26px;
              width: 1px;
              height: 40px;
              background-color: rgba(0,0,0,0.05);
            }
          }
          &:nth-child(n+3) {
            &::before {
              content: '';
              position: absolute;
              left: 40%;
              top: 0;
              width: 40px;
              height: 1px;
              background-color: rgba(0,0,0,0.05);
            }
          }
          .svg-icon {
            width: 20px;
            height: 20px;
          }
          .eli-name {
            font-size: $font_16;
            color: $colour_6;
            margin-left: 8px;
          }
          .eli-num {
            font-size: $font_24;
            color: $num_color;
            font-weight: bold;
            margin-top: 4px;
          }
        }
      }
    }
    .home-title {
      color: $title_color;
      font-size: $font_14;
      font-weight: bold;
    }
    .home-time {
      color: $time_color;
      font-size: 12px;
    }
    .shop-wrap {
      padding: 12px 18px;
      background-color: #fff;
      &.pg-b-25 {
        padding-bottom: 25px;
      }
      .shop-chart {
        width: 100%;
        height: 240px;
      }
      .more {
        font-size: 12px;
        color: #666;
        display: flex;
        align-items: center;
        span {
          margin-top: 3px;
        }
      }
    }
    /deep/.el-table__row {
      .detection-index {
        width: 24px;
        height: 24px;
        line-height: 24px;
        background: #F4F4F4;
        border-radius: 4px;
        text-align: center;
        font-weight: bold;
        color: $colour_6;
      }
      &:nth-child(-n + 3) {
        .detection-index {
          background-color: #E27C21;
          color: #fff;
        }
      }
    }
    .chart-line {
      width: 100%;
      height: 510px;
    }
    .pl-20 {
      padding-left: 20px;
    }
    .mg-t-3 {
      margin-top: 3px;
    }
    .transact-btn {
      background: #FFF;
      border-radius: 4px;
      border: 1px solid $menuActiveText;
      color: $menuActiveText;
      &:hover {
        background: rgba(3,169,142, .1);
        border-color: rgba(3,169,142, .4);
      }
    }
  }
</style>